vite 简介
Vite 是一款面向现代前端的构建工具，核心优势是开发响应速度与清晰的配置体验，由 Vue 生态核心团队维护。文档入口：vite.dev · 中文文档（镜像站点更新节奏略滞后于英文站，以英文为准）。
作用
Vite 旨在解决传统构建工具（如 Webpack）开发时 “冷启动慢、热更新滞后” 的痛点。
它分为开发环境和生产环境两个核心场景，开发时基于原生 ES 模块（ESM）实现无打包开发，生产时则基于 Rollup 优化构建产物。
原理
开发环境：利用浏览器对 ES 模块（import/export）的原生支持，直接加载源码而非打包产物，避免传统工具的全量打包耗时。
依赖预构建：通过 esbuild 将 CommonJS 格式的依赖（如 npm 包）转换为 ES 模块，同时缓存结果，解决依赖兼容性和加载性能问题。
生产环境：基于 Rollup 打包，进行代码分割、Tree-shaking、压缩等优化，兼顾产物体积和运行效率。
核心特性
- 极速冷启动：开发时不打包全部代码，仅按需编译当前请求的模块，启动速度毫秒级。
- 即时热模块替换（HMR）：修改代码后快速更新，保留组件状态，无需整页刷新。
- 优化的生产构建：借助 Rollup 实现代码分割、Tree-shaking、懒加载等，产物体积更小、性能更优。
- 原生 ESM 支持：直接利用浏览器对 ESM 的支持，无需额外转译，简化构建流程。
- 丰富的生态兼容：无缝支持 Vue、React、Svelte 等框架，以及 TypeScript、CSS 预处理器、静态资源等。
使用场景
现代前端项目：官方模板覆盖 Vue / React / Preact / Lit / Svelte / Solid / Qwik 等（以脚手架列表为准），语法上以原生 ESM 为前提。
中小型项目：create vite 起步快，默认配置即可联调。
大型项目：开发态按需编译与 HMR 减轻等待；生产构建仍走完整打包（底层 Rollup），需自行关注分包与缓存策略。
与 webpack 如何共存口径？
二者都是「前端工程化」常见选项：webpack 生态厚、联邦方案与历史项目多；Vite 开发体验更轻。迁移时可按模块渐进替换或保留双构建线，没有唯一正确答案。
本目录结构
| 编号 | 主题 |
|---|---|
| 02 | 创建项目、vite.config、环境变量 |
| 03 | SSR / SSG / ISR 与优缺点 |
| 04 | 依赖预构建、生产构建与 Rollup |
| 05 | 插件、Vitest、与 webpack 对比 |